<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<title>${server==null?"全局":server.name}service表</title>

<div class="container-fluid " > <!--table行-->
    <h1 class="text-center">${server==null?"全局":server.name}:service表</h1>
    <table class="table table-striped table-bordered table-hover " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall2" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1 hidden">编号</th>
            <th class="col-md-1">服务器</th>
            <th class="col-md-1">DeployEnv</th>
            <th class="col-md-1">名称</th>
            <th class="col-md-1">version</th>
            <th class="col-md-1">ports</th>
            <th class="col-md-1">customer</th>
            <th class="col-md-1">programmer</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-2 text-center detail " >操作

            </th>
        </tr>
        </thead>
        <tbody>
        <% Integer count=1;%>
        <c:forEach items="${requestScope.services}" var="service" varStatus="serviceStatus">
            <tr class="tr">
                <td>
                    <input type="checkbox">
                    <span class="count"><%=count++%></span>
                </td>
                <td class="id hidden">${service.id}</td>
                <td class="">
                    <select class="serverId form-control">
                        <c:forEach items="${requestScope.servers}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${service.serverId==item.id}">
                                        selected
                                    </c:if>
                            >${item.name}</option>
                        </c:forEach>
                    </select>
                </td>
                <td class="">
                    <select class="deployEnvId form-control">
                        <c:forEach items="${requestScope.deployEnvIds}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${service.deployEnvId==item.id}">
                                        selected
                                    </c:if>
                            >${item.name}</option>
                        </c:forEach>
                    </select>
                </td>
                <td class="">
                    <input type="text" class="form-control name" placeholder="服务名" value="${service.name}">
                </td>
                <td class="">
                    <input type="text" class="form-control version" placeholder="version" value="${service.version}">
                </td>
                <td class="ports">${service.ports}</td>
                <td class="">
                    <input type="text" class="form-control customer" placeholder="customer" value="${service.customer}">
                </td>
                <td class="">
                    <input type="text" class="form-control programmer" placeholder="programmer" value="${service.programmer}">
                </td>
                <td class="">
                    <input type="text" class="form-control endTime" placeholder="endTime" value="${service.endTime}">
                </td>
                <td class="detail text-center">

                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-wrench config hand" title="配置服务内部"></div>
                    </div>
                </td>
            </tr>
        </c:forEach>
        <tr class="tr">
            <td>
                <input type="checkbox">
                <span class="count"><%=count++%></span>
            </td>
            <td class="id hidden"></td>
            <td class="">
                <select class="serverId form-control">
                    <c:forEach items="${requestScope.servers}" var="item">
                        <option value="${item.id}">${item.name}</option>
                    </c:forEach>
                </select>
            </td>
            <td class="">
                <select class="deployEnvId form-control">
                    <c:forEach items="${requestScope.deployEnvIds}" var="item">
                        <option value="${item.id}">${item.name}</option>
                    </c:forEach>
                </select>
            </td>
            <td class="">
                <input type="text" class="form-control name" placeholder="服务名">
            </td>
            <td class="">
                <input type="text" class="form-control version" placeholder="version">
            </td>
            <td class="ports"></td>
            <td class="">
                <input type="text" class="form-control customer" placeholder="customer">
            </td>
            <td class="">
                <input type="text" class="form-control programmer" placeholder="programmer">
            </td>
            <td class="">
                <input type="text" class="form-control endTime" placeholder="endTime">
            </td>
            <td class="detail text-center">

                <div class="btn-group">
                    <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                    <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    <div class="btn btn-default glyphicon glyphicon-wrench config hand" title="配置服务内部"></div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form"> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a  class="option">php</a>
                            </li>
                            <li>
                                <a  class="option">mysql</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input  type="text" class="form-control input"  style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true"><!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true"><!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea</p>
</div> <!--table行-->
</body>
<script>
    $("table").click(function (event){//detail 操作模块的点击事件,利用冒泡
        let eventTarget=$(event.target);
        if(eventTarget.hasClass('update')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            $("#update").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if(eventTarget.hasClass('delete')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("idEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                $("#delete").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
        if(eventTarget.hasClass('config')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("endTimeEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                let serviceId=eventTarget.closest(".tr").children(".id:first").html();
                console.log(serviceId);
                window.open("<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId="+serviceId);
                // $("#delete").modal("show")
                // $('.yaotijiaodedian').remove('yaotijiaodedian')
                // $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"config"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡

    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget=$('.yaotijiaodedian')
        let trObj=eventTarget.closest("tr")
        let data = {};
        data.id=trObj.find(".id").html()
        data.serverId=trObj.find(".serverId").val()
        data.deployEnvId=trObj.find(".deployEnvId").val()
        data.name=trObj.find(".name").val()

        data.version=trObj.find(".version").val()
        data.ports=trObj.find(".ports").html()
        data.customer=trObj.find(".customer").val()
        data.programmer=trObj.find(".programmer").val()
        data.endTime=trObj.find(".endTime").val()


        if(data.name==""){
            alert("请注明服务名称是什么")
            return
        }
        if(data.version==""){
            alert("请注明服务版本是什么")
            return
        }
        if(data.customer==""){
            alert("请写清楚这个服务的客户")
            return
        }
        if(data.programmer==""){
            alert("请写清楚这个服务是哪个程序员负责的")
            return
        }
        if(data.endTime==""){
            alert("任何服务必须有生命周期")
            return
        }

        $.ajax({
            type: "post",
            url: "<%=basepath%>serviceServlet?action=ajaxCreateService",
            data: data,
            success: function (response, status, xhr) {
                console.log("收到回信")
                console.log(response)
                if(response=="存入成功"){
                    console.log("存入成功")
                    <c:if test="${empty server}">
                        location.href="<%=basepath+"serviceServlet?action=list"%>";
                    </c:if>
                    <c:if test="${not empty server}">
                        location.href="<%=basepath+"serviceServlet?action=list&serverId="%>${server.id}";
                    </c:if>
                }else {
                    alert("存入失败");
                }
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget=$('.yaotijiaodedian')
        let trObj=eventTarget.closest(".tr");
        $.ajax({
            type:"post",
            url:"<%=basepath%>serviceServlet?action=ajaxDeleteService",
            data:{"id":trObj.children(".id:first").html()},
            success:function (response,status,xhr) {
                console.log("收到回信")
                console.log(response)
                if(response=="删除成功"){
                    <c:if test="${empty server}">
                    location.href="<%=basepath+"serviceServlet?action=list"%>";
                    </c:if>
                    <c:if test="${not empty server}">
                    location.href="<%=basepath+"serviceServlet?action=list&serverId="%>${server.id}";
                    </c:if>
                }else {
                    alert("删除失败");
                }
            },
            timeout:10000, //如果超时1000毫秒，就结束
            error:function (xhr,errorText,errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:"+errorText); //error
                console.log("errorType:"+errorType); //not found
                console.log("xhr.status:"+xhr.status); //404
                console.log("xhr.statusText:"+xhr.statusText); //not found
            },
            dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是删除的模态框点击了确定键后搜索数据并提交的过程

</script><!--表格点击事件-->
</html>